使用 $('<div/>') 取代 '<div></div>'
現在網頁除了用到 AJAX 外,
有時候也會有動態新增 DOM 元素的需求,
一般來說會這樣做
培根
$('#item').html('<div>test</div>');
大部分情況下很方便,
但如果還需要加上 Class 屬性,
或是 style 屬性,
甚至底下還需要包含其它子元素 (img、a),
那情況就會變成這樣
$('#item').html('<div class="list" style="color:red">jQuery<a href="http://ithelp.ithome.com.tw"><img src="image.jpg"/></a></div>');
程式碼會變成非常的長,而且不易維護!
如果使用
$('#item').html(
$('<div/>')
.addClass('list')
.css('color','red')
.html('jQuery')
.append(
$('<a/>')
.attr('href','http://ithelp.ithome.com.tw')
.append(
$('<img/>')
.attr('src','image.jpg')
)
)
);
除了看起來結構明瞭,
以後維護起來也方便!
瀏覽器處理一串 html 的能力跟效率，遠勝於透過 jQuery 去一個一個細節設定。
如果今天這個案例只有一個元素影響並不大，
如果你今天是跑迴圈塞個一百個東西，影響就會比較明顯了。
原則上還是建議如果能夠集合成一群 html ，還是以 html 操作為主，
只是 html 的 string 組裝可以適當的排版。
意思就是就效能來說，第一種方式會比第二種的方式要好嗎? 不過第一種方式要是dom稍微複雜一點，會不會不好維護，例如說一個意見調查的表單，包含各種input的元素
沒想到jQuery還可以這樣用composite的方式來增加dom元素。
我是覺得這樣就好像使用document.createElement還是innerHTML的爭議...不過以維護來說，我覺得是看個人...使用html、使用template、使用createElement、使用$做composite都是方法，關鍵還是使用的情境以及開發的流程。有些複雜的應用，說不定考慮用template還比動態調整DOM有彈性也易於維護。
至於表單的例子...我反而不傾向直接用jQuery，應該用更好的方式來包裝。看看能不能做出類似這樣的使用方法：
<pre class="c" name="code">
var form = new Form({method:'post',action:'/comment.php'});
form.add(new Text({name:'email',size:'50'}));
form.add(new TextArea({name:'comment',width:'50',height:'20'}));
form.add(new Submit());
form.add(new Reset());
form.render("form_panel");
我們都知道這件事情上最麻煩的其實是字串的組裝，
所以如果是複雜一點的例子，你也可以考慮用 html 的方式作字串的存放
常見的用法是用一個瀏覽器看不懂的 script tag 像這樣，
再用 JS 去存取 template 的"字串"，像這個例子。
<pre class="c" name="code">
<script type = "text/template" id="mytmp">
<div> <!-- .... --></div>
</script>
也有一些樣板引擎會加上比方說 <%= %> 之類的運算符。 (jQuery 的作者 John Resig 就有做一個http://ejohn.org/blog/javascript-micro-templating/ )
至於 template 之後對應到的特別需求，像是 data-attribute （可以用html5的方式給），
或是 event 的綁定（可以後來再另外針對需要來 bind 上去，或直接採用 delegate 。 ）
這些都還可以另外作處理。
jQuery object 本身雖然方便，操作性也比較強，
但是如果是一定程度的亮的操作，做做最佳化效能上會好很多。
另一方面是， jquery object 這樣的組裝方式，
如果你需要抽換 tag 的層級的話，還是比 html 來得複雜。
iThome鐵人賽
看影片追技術